<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @LastEditTime: 2022-09-08 14:32:46
-->
<template>
  <div class="EpidemicDynamic">
    <!-- 疫情动态数据展示 -->
    <div class="epidemicDyn">
      <!-- 当前时间 -->
      <div class="nowTime">截止到：{{ new Date() | fmtDate }} 全国数据统计</div>
      <!-- 第一个部分 -->
      <div class="first">
        <!-- 新增确诊的盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#ec1d23">
            {{ ncovData[0].desc.currentConfirmedIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增确诊</div>
        </div>
        <!-- 新增治愈的盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#21af4b">
            {{ ncovData[0].desc.curedIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增治愈</div>
        </div>
        <!-- 新增死亡的盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#96989c">
            {{ ncovData[0].desc.deadIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增死亡</div>
        </div>
      </div>
      <!-- 当前时间 -->
      <div class="nowTime">截止到：{{ new Date() | fmtDate }} 全国数据统计</div>

      <!-- 第二个部分 -->
      <div class="second">
        <!-- 现存确诊 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#ec1d23">
            {{ ncovData[0].desc.currentConfirmedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">现存确诊</div>
        </div>
        <!-- 现有无症状 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#21af4b">
            {{ ncovData[0].desc.seriousCount }}
          </div>
          <!-- 标题 -->
          <div class="title">现有无症状</div>
        </div>
        <!-- 累积境外输入 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#f16122">
            {{ ncovData[0].desc.suspectedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积境外输入</div>
        </div>
        <!-- 累积确诊 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#ec1d23">
            {{ ncovData[0].desc.confirmedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积确诊</div>
        </div>
        <!-- 累计治愈 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#21af4b"> 
            {{ ncovData[0].desc.curedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累计治愈</div>
        </div>
        <!-- 累积死亡 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]" style="color:#96989c">
            {{ ncovData[0].desc.deadCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积死亡</div>
        </div>
      </div>
    </div>
    <!-- 国内疫情数据 -->
    <div class="inLandCovid">
      <!-- 标题 -->
      <div class="nowTime">国内病例</div>
      <!-- 表格展示区域 -->
      <div class="tableContent">
        <!-- 表格的数据源 :data="tableData" -->
        <el-table :data="inLandCovidData" border style="width: 100%">
          <!-- prop="data" 根据返回的数据 将要显示的字段 -->
          <!-- lable="日期" 每一列的名称 -->
          <!-- 地区 -->
          <el-table-column prop="province" label="地区" align="center">
          </el-table-column>
          <!-- 新增确诊 -->
          <el-table-column prop="confirmed" label="新增确诊" align="center">
          </el-table-column>
          <!-- 新增疑似 -->
          <el-table-column prop="suspected" label="新增疑似" align="center">
          </el-table-column>
          <!-- 新增死亡 -->
          <el-table-column prop="dead" label="新增死亡" align="center">
          </el-table-column>
          <!-- 新增治愈 -->
          <el-table-column prop="cure" label="新增治愈" align="center">
          </el-table-column>
          <!-- 境外输入 -->
          <el-table-column prop="outside" label="境外输入" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 标题 -->
    <div class="nowTime">最新进展</div>
    <!-- 最新进展 -->
    <div class="lastedProgress">
      <!-- 新闻列表展示区域 -->
      <div class="newsList">
        <!-- .native调用原生的方法或属性 -->
        <el-timeline>
          <el-timeline-item
            v-for="item in newsListData"
            :key="item.id"
            :timestamp="item.publishTime | fmtDate"
            placement="top"
            @click.native="toNewsDetail(item)"
            style="cursor:pointer"
            
          >
            <el-card>
              <h4 >{{ item.title }}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="83%"
      center
    >
      <!-- 展示内容的区域 -->
      <div v-html="newsContent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 分⻚ -->
    <el-pagination
      background
      style="margin-top: 1em"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
// 引入request.js
import { get } from "@/utils/request";
export default {
  data() {
    return {
      //疫情动态数据的数组
      ncovData: [],
      // 国内疫情数据
      inLandCovidData: [],
      // 新闻列表数据
      newsListData: [],
      // 控制模态框的显示与隐藏
      centerDialogVisible: false,
      // 新闻标题
      newsTitle: "",
      // 新闻内容
      newsContent: "",
      // 分⻚所需要的变量
      // 当前⻚码
      page: 1,
      // 每⻚要展示的数据条数
      pageSize: 5,
      // 数据总条数
      total:0,
    };
  },
  // 生命周期钩子函数
  created() {
    // 调用获取疫情动态数据的方法，页面加载的时候自动执行
    this.getNcovData();
    // 自动执行获取国内疫情数据的方法
    this.getInLandCovidData();
    // 自动执行
    this.getNewsListData();
  },
  methods: {
    // 获取疫情动态数据
    getNcovData() {
      // 发送网络请求
      axios({
        // 接口地址
        url: "http://api.tianapi.com/ncov/index?key=3e8e8e29357d55fe43dd3858800f8bc2",
      }).then((res) => {
        // console.log(res.data.newslist);
        // 赋值
        this.ncovData = res.data.newslist;
      });
    },
    // 获取国内疫情数据
    async getInLandCovidData() {
      // 设置参数
      let params = {
        page: 1,
        pageSize: 5,
      };
      let res = await get("/epidemic/pageQuery", params);
      // console.log(res.data.list);
      // 赋值
      this.inLandCovidData = res.data.list;
    },
    //获取新闻列表相关的数据
    async getNewsListData() {
      // 设置参数
      let params = {
        // page: 1,
        // pageSize: 10,
        // 当前的⻚码
        page: this.page,
        // 每⻚要展示多少条数据
        pageSize: this.pageSize,
      };
      // 发送请求
      let res = await get("/article/pageQuery", params);
      console.log(res);
      // 数据的赋值
      this.newsListData = res.data.list;
      // console.log(this.newsListData,'total');
      this.total = res.data.total
      // console.log(data.total,'total');
    },
    handleCurrentChange(val) {
      // console.log(`当前⻚: ${val}`);
      this.currentPage = val
      // 再去强调一次获取新闻列表相关信息的方法
      this.getNewsListData();
    },
     //pageSize改变事件
     handleSizeChange(pageSize) {
      //将分页插件最新的参数赋值给params
      this.pageSize = pageSize;
      //调用方法
      this.getNewsListData();
    },
    // 点击查看新闻详情
    toNewsDetail(item) {
      this.newsTitle = item.title;
      this.newsContent = item.content;
      // 弹出模态框
      this.centerDialogVisible = true;
    },
  },
};
</script>

<style scoped>
/* 设置当前时间的样式 */
.nowTime {
  /* 设置颜色 */
  color: #979797;
  /* 设置外边距 */
  margin: 5px;
}
/* 第一部分样式的设置 */
.first {
  /* flex布局 让所有的子元素在父元素上沿着主轴方向进行水平排列*/
  display: flex;
  /* 分配剩余空间 */
  justify-content: space-between;
}
/* 第一部分里面盒子的样式设置 */
.first .box,
.second .box {
  background-color: #ebf7fc;
  /* 设置标签的宽度 */
  width: 33%;
  height: 120px;
  /* 设置圆角 */
  border-radius: 5px;
  /* 设置文本居中 */
  text-align: center;
}
/* 盒子里的数量的样式设置 */
.first .box .num,
.second .num {
  /* 设置一个顶部外边距 */
  margin-top: 35px;
  /* 字体加粗 */
  font-weight: bold;
}
/* 盒子里的标题的样式设置 */
.first .box .title,
.second .title {
  margin-top: 5px;
}
/* 第二部分的样式设置 */
.second {
  display: flex;
  /* 开启换行 */
  flex-wrap: wrap;
  justify-content: space-between;
}
/* 第二部分的盒子样式设置 */
.second .box {
  margin: bottom 5px;
  background-color: #f8f2ec;
}
/* 最新进展的样式处理 */
.lastedProgress {
  margin-left: -30px;
}
</style>
